<!--
 * @Description: 函数作用说明
 * @Author: zdq
 * @Date: 2024-10-27 20:53:07
 * @LastEditTime: 2024-11-05 23:17:24
 * @LastEditors: zdq
 * @Reference: 
-->
<template>
  <div
    ref="lookW"
    v-loading="
      getOrderStatusQtyLoading ||
      getServiceTypeQtyLoading ||
      getStatisticsQtyLoading ||
      getOrderListStatusQtyLoading
    "
    class="home-wrapper"
  >
    <div class="statistics-wrapper">
      <div class="statistics">
        <div class="order">
          <div class="order-item today" @click="onToOrder('today')">
            <div class="num_info">
              <p>今日工单</p>
              <p class="num">{{ orderObj.todayTotalOrderQty.toLocaleString() }}</p>
            </div>
            <el-icon size="50">
              <Document />
            </el-icon>
          </div>
          <div class="order-item month" @click="onToOrder('month')">
            <div class="num_info">
              <p>本月工单</p>
              <p class="num">{{ orderObj.monthTotalOrderQty.toLocaleString() }}</p>
            </div>
            <el-icon size="50">
              <Document />
            </el-icon>
          </div>
          <div class="order-item week" @click="onToOrder('week')">
            <div class="num_info">
              <p>本周工单</p>
              <p class="num">{{ orderObj.weekTotalOrderQty.toLocaleString() }}</p>
            </div>
            <el-icon size="50">
              <Document />
            </el-icon>
          </div>
          <!-- 隐藏 -->
          <!-- <div class="order-item history" @click="onToistory">
            <div class="num_info">
              <p>历史工单</p>
              <p class="num">{{ orderObj.outHistoryOrderQty?.toLocaleString() || 0 }}</p>
            </div>
            <el-icon size="50">
              <Document />
            </el-icon>
          </div> -->
          <div class="order-item all" @click="onToOrder('all')">
            <div class="num_info">
              <p>全部工单</p>
              <p class="num">{{ orderObj.totalOrderQty.toLocaleString() }}</p>
            </div>
            <el-icon size="50">
              <Document />
            </el-icon>
          </div>
        </div>
        <div class="real-time-data">
          <div class="title">
            <div class="text-icon">
              <div class="iconfont icon-real-time-data-1"></div>
              <div class="text">实时数据</div>
            </div>
            <div class="update-time">更新时间：{{ now }}</div>
          </div>
          <div class="divider"></div>
          <div class="content">
            <!-- 待部门处理 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(2, '')">
              <p class="label_tip">待部门处理</p>
              <div class="order_info today-finish-order">
                <div class="icon">
                  <i class="iconfont icon-gongdanwancheng1"></i>
                </div>
                <div class="num">{{ orderListStatusQty.waitNetworkHandlerOrder }}</div>
              </div>
              <!-- <p class="tip">昨日完成&nbsp;{{ statisticsQty.yestodayFinishOrderQty }}</p> -->
            </div>

            <!-- 处理中 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(3, '')">
              <p class="label_tip">处理中</p>
              <div class="order_info today-setled-order">
                <div class="icon">
                  <i class="iconfont icon-daibaoxiaoguanli"></i>
                </div>
                <div class="num">{{ orderListStatusQty.handlerOrder }}</div>
              </div>
              <!-- <p class="tip">今日已结算费用 ￥0.00</p> -->
            </div>

            <!-- 已收款 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(1040, 2)">
              <p class="label_tip">已收款</p>
              <div class="order_info order-today-service-customer">
                <div class="icon">
                  <i class="iconfont icon-kehuqunzu"></i>
                </div>
                <div class="num">{{ orderListStatusQty.paymentStatusCount }}</div>
              </div>
              <!-- <p class="tip">昨日报单公司 0</p> -->
            </div>

            <!-- 已开票 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(1020, 2)">
              <p class="label_tip">已开票</p>
              <div class="order_info today-return-visit-order">
                <div class="icon">
                  <i class="iconfont icon-huifang1"></i>
                </div>
                <div class="num">{{ orderListStatusQty.openTicketCount }}</div>
              </div>
              <!-- <p class="tip">昨日回访 0</p> -->
            </div>

            <!-- 已取消 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(5, '')">
              <p class="label_tip">已取消</p>
              <div class="order_info this-month-finish-order">
                <div class="icon">
                  <i class="iconfont icon-gongdanwancheng1"></i>
                </div>
                <div class="num">{{ orderListStatusQty.cancelOrder }}</div>
              </div>
              <!-- <p class="tip">上个月完成 &nbsp;{{ statisticsQty.lastMonthFinishOrderQty }}</p> -->
            </div>

            <!-- 已完成 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(4, '')">
              <p class="label_tip">已完成</p>
              <div class="order_info this-month-settled-order">
                <div class="icon">
                  <i class="iconfont icon-daibaoxiaoguanli"></i>
                </div>
                <div class="num">{{ orderListStatusQty.finishOrder }}</div>
              </div>
              <!-- <p class="tip">本月已结算费用 ￥0.00</p> -->
            </div>

            <!-- 未收款 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(1040, 1)">
              <p class="label_tip">未收款</p>
              <div class="order_info order-this-month-service-customer">
                <div class="icon">
                  <i class="iconfont icon-kehuqunzu"></i>
                </div>
                <div class="num">{{ orderListStatusQty.notPaymentStatusCount }}</div>
              </div>
              <!-- <p class="tip">上个月报单公司 0</p> -->
            </div>

            <!-- 未开票 -->
            <div class="order_data cursor-pointer" @click="handleStatusItemClick(1020, 1)">
              <p class="label_tip">未开票</p>
              <div class="order_info this-month-return-visit-order">
                <div class="icon">
                  <i class="iconfont icon-huifang1"></i>
                </div>
                <div class="num">{{ orderListStatusQty.notOpenTicketCount }}</div>
              </div>
              <!-- <p class="tip">上个月回访 0</p> -->
            </div>
          </div>
        </div>
        <div class="charts">
          <!-- <div class="map-chart chart">
            <div class="info">
              <div class="header">
                <h3 class="title_label">
                  <i class="iconfont icon-gis"></i>
                  工单区域分布
                </h3>
                <full-screen-map-home></full-screen-map-home>
              </div>
              <div class="divider"></div>
              <div class="map_box" style="padding: 1px 1px 1px 1px">
                <map-home ref="mapHomeInstance"></map-home>
              </div>
              <p class="footer_tip">最近更新时间：{{ now }}</p>
            </div>
          </div> -->
          <div class="pie-chart chart">
            <div class="info">
              <div class="header">
                <h3 class="title_label">
                  <i class="iconfont icon-daohang-gongdantongjifenxi"></i>
                  工单状态统计
                </h3>
              </div>
              <div class="divider"></div>
              <div class="map_box">
                <div ref="chartsRef2" class="chart-center"></div>
              </div>
              <p class="footer_tip">最近更新时间：{{ now }}</p>
            </div>
          </div>
          <div class="pie-chart chart">
            <div class="info">
              <div class="header">
                <h3 class="title_label">
                  <i class="iconfont icon-statistics"></i>
                  服务类型统计
                </h3>
              </div>
              <div class="divider"></div>
              <div class="map_box">
                <div ref="chartsRef3" class="chart-center"></div>
              </div>
              <p class="footer_tip">最近更新时间：{{ now }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="sidebar">
        <div class="content">
          <div class="quick-operate">
            <div class="title">
              <i class="iconfont icon-yichu"></i>
              <div class="text">快捷操作</div>
            </div>
            <ul class="content">
              <li class="card" @click="onClickPage(1)">
                <div class="icon">
                  <i class="iconfont icon-add-order-2"></i>
                </div>
                <span>新建工单</span>
              </li>
              <!-- <li class="card" @click="onClickPage(2)">
                <div class="icon">
                  <i class="iconfont icon-add-customer-1"></i>
                </div>
                <span>新增公司</span>
              </li>
              <li class="card" @click="onClickPage(3)">
                <div class="icon">
                  <i class="iconfont icon-add-good"></i>
                </div>
                <span>新增设备</span>
              </li> -->
              <li class="card" @click="onClickPage(4)">
                <div class="icon">
                  <i class="iconfont icon-xianchangqiandao"></i>
                </div>
                <span>新增部门</span>
              </li>
              <li class="card" @click="onClickPage(5)">
                <div class="icon">
                  <i class="iconfont icon-order-set-2"></i>
                </div>
                <span>工单设置</span>
              </li>
            </ul>
          </div>
          <div class="to-do-list">
            <div class="title">
              <div class="text-icon">
                <i class="iconfont icon-to-do-lis-1"></i>
                <div class="text">待办事项</div>
              </div>
              <div class="update-time">更新时间：{{ now }}</div>
            </div>
            <div class="divider"></div>
            <div class="statistics">
              <div
                class="statistics-item pending-check-part cursor-pointer"
                @click="handleStatusItemClick(3, 5)"
              >
                <div class="content">
                  <i class="iconfont icon-pc_menu_richangweixiujihuayuzhihang"></i>
                  <div class="num">{{ orderListStatusQty.spareWaitCheckQty }}</div>
                </div>
                <p class="title">物料待审核</p>
              </div>
              <div
                class="statistics-item pending-settle-order cursor-pointer"
                @click="handleStatusItemClick(3, 6)"
              >
                <div class="content">
                  <i class="iconfont icon-order-settlement"></i>
                  <div class="num">{{ orderListStatusQty.snCodeWaitCheckCount }}</div>
                </div>
                <p class="title">工单序列号审核</p>
              </div>
              <div
                class="statistics-item pending-check-cost cursor-pointer"
                @click="handleStatusItemClick(3, 4)"
              >
                <div class="content">
                  <i class="iconfont icon-dangfei1"></i>
                  <div class="num">{{ orderListStatusQty.feeWaitCheckQty }}</div>
                </div>
                <p class="title">费用待审核</p>
              </div>
              <div
                class="statistics-item sn-code-extend-warratny-check cursor-pointer"
                @click="handleSnCodeExtendWarrantyWaitCheckClick"
              >
                <div class="content">
                  <i class="iconfont icon-dangfei1"></i>
                  <div class="num">{{ orderListStatusQty.snCodeWarrantyDateWaitCheckCount }}</div>
                </div>
                <p class="title">序列号延保审核</p>
              </div>
              <!-- <div class="statistics-item abnormal-order">
                <div class="content">
                  <i class="iconfont icon-yichanggongdantongji"></i>
                  <div class="num">{{ statisticsQty.exceptionOrderQty }}</div>
                </div>
                <p class="title">异常工单（挂起+超时）</p>
              </div> -->
            </div>
          </div>
        </div>
        <div class="notice">
          <div class="info">
            <div class="title flex-justify-between">
              <h3>
                <i class="iconfont icon-gonggao2" style="color: #007cff; font-size: 14px"></i>
                公告
              </h3>
              <!-- <span class="flex-justify-between">
                查看全部
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </span> -->
            </div>
            <div class="list">
              <ul class="items">
                <li v-for="item in noticeList" :key="item.id">
                  <div class="item flex-justify-between">
                    <div class="left flex-align-center">
                      <span class="tips">通知</span>
                      <span class="text">
                        <h-link @click="handleNoticeNameClick(item.id, item.name)">{{
                          item.name
                        }}</h-link>
                      </span>
                    </div>
                    <span class="time">{{ item.updateTime }}</span>
                  </div>
                </li>
              </ul>
              <div class="footer flex-center"><span>-没有更多了-</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <notice-preview-modal
      v-model="noticePreviewModalVisible"
      :notice-id="previewingNoticeId"
      :name="previewingNoticeName"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
  import * as echarts from 'echarts'
  import { getHomeOrderQty, getNoticeList } from '@/api/home'
  import { useRouter } from 'vue-router'
  import { Document } from '@element-plus/icons-vue'
  import MapHome from '@/components/pages/home/map/index.vue'
  import {
    useGetOrderStatusQty,
    useGetServiceTypeQty,
    useGetStatisticsQty,
  } from '@/services/pages/home'
  import { useGetOrderListStatusQty } from '@/services/pages/order/useOrder'
  import NoticePreviewModal from '@/components/pages/home/notice-preview-modal/index.vue'

  const { orderStatusQty, getOrderStatusQtyLoading, getOrderStatusQty } = useGetOrderStatusQty()
  const { serviceTypeQty, getServiceTypeQtyLoading, getServiceTypeQty } = useGetServiceTypeQty()
  const { statisticsQty, getStatisticsQtyLoading, getStatisticsQty } = useGetStatisticsQty()
  const { orderListStatusQty, getOrderListStatusQtyLoading, getOrderListStatusQty } =
    useGetOrderListStatusQty()

  // 地图组件实例
  const mapHomeInstance = ref<InstanceType<typeof MapHome> | null>(null)

  // 正在预览的公告id
  const previewingNoticeId = ref('')

  // 正在预览的公告名称
  const previewingNoticeName = ref('')

  // 公告预览弹窗显示状态
  const noticePreviewModalVisible = ref(false)

  /**
   * 公告名称点击事件
   * @param {string} noticeId - 公告id
   */
  const handleNoticeNameClick = (noticeid: string, name: string) => {
    previewingNoticeId.value = noticeid
    noticePreviewModalVisible.value = true
    previewingNoticeName.value = name
  }

  const onToOrder = (type: 'today' | 'month' | 'week' | 'all') => {
    router.push({ path: '/order/list', query: { type } })
  }

  /**
   * 状态点击事件
   * @param {(0|1|2|3|4|5|1001|1020|1040)} status - 主状态
   * @param {(0|1|2|3|4|5|6)} childStatus - 子状态
   */
  const handleStatusItemClick = (
    status: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 1020 | 1040,
    childStatus: 0 | 1 | 2 | 3 | 4 | 5 | 6 | '',
  ) => {
    router.push({ path: '/order/list', query: { status, childStatus } })
  }

  /**
   * 序列号延保待审核点击事件
   */
  const handleSnCodeExtendWarrantyWaitCheckClick = () => {
    router.push({ path: '/code/list', query: { status: 'wait-check' } })
  }

  // const onToistory = () => {
  //   router.push({ path: '/order/history' })
  // }
  const router = useRouter()
  const loading = ref(false)
  /**工单统计数量*/
  const orderObj = ref({
    totalOrderQty: 0,
    todayTotalOrderQty: 0,
    weekTotalOrderQty: 0,
    monthTotalOrderQty: 0,
    outHistoryOrderQty: 0,
  })
  const getHomeOrderQtyFun = async () => {
    await getHomeOrderQty().then((res) => {
      if (res.data.code == 20000) {
        orderObj.value = res.data.data.row
      }
    })
  }

  const noticeList = ref([])
  // 获取公告
  const getNoticeListInfo = () => {
    const query = {
      limit: 5,
      page: 1,
    }
    getNoticeList(query).then((res) => {
      noticeList.value = res.data.data.rows
    })
  }

  const onClickPage = (val) => {
    switch (val) {
      case 1:
        router.push({ path: '/order/new' })
        break
      case 2:
        router.push({ path: '/user/list', query: { type: 'new' } })
        break
      case 3:
        router.push({ path: '/commodity/add' })
        break
      case 4:
        router.push({ path: '/net/new' })
        break
      case 5:
        router.push({ path: '/busic/base/orderset' })
        break
    }
  }

  const now = ref()
  // 获取当前时间
  const time = new Date()
  const y = ref(time.getFullYear()) // 年
  const m = ref((time.getMonth() + 1).toString()) // 月
  const d = ref(time.getDate().toString()) // 日
  m.value = m.value.toString().padStart(2, '0')
  d.value = d.value.toString().padStart(2, '0')
  now.value =
    y.value +
    '-' +
    m.value +
    '-' +
    d.value +
    ' ' +
    time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) // 截止时间

  const chartsRef2 = ref<HTMLElement | null>()
  const chartsRef3 = ref<HTMLElement | null>()

  const options2 = computed(() => {
    return {
      color: ['#007cff', '#e69103', '#7948EA', '#fddd32', '#00c0c0', '#f56c6c'],
      tooltip: {
        trigger: 'item',
        formatter: (params: { data: { value: number }; name: string }) => {
          return `${params.name.split('(')[0].trim()}：${params.data.value}`
        },
      },
      legend: {
        top: '6%',
        padding: [0, 15],
      },
      series: [
        {
          type: 'pie',
          radius: '70%',
          center: ['50%', '55%'],
          top: 30,
          label: {
            show: false,
          },
          data: [
            {
              value: orderStatusQty.value.totalOrderQty,
              name: `全部工单\xa0(${orderStatusQty.value.totalOrderQty})\xa0\xa0`,
            },
            {
              value: orderStatusQty.value.waitDisaptchOrderQty,
              name: `待派单\xa0(${orderStatusQty.value.waitDisaptchOrderQty})\xa0\xa0`,
            },
            {
              value: orderStatusQty.value.processingOrderQty,
              name: `处理中\xa0(${orderStatusQty.value.processingOrderQty})\xa0\xa0`,
            },
            {
              value: orderStatusQty.value.waitProcessingOrderQty,
              name: `待部门处理\xa0(${orderStatusQty.value.waitProcessingOrderQty})\xa0\xa0`,
            },
            {
              value: orderStatusQty.value.endOrderQty,
              name: `已完成\xa0(${orderStatusQty.value.endOrderQty})\xa0\xa0`,
            },
            {
              value: orderStatusQty.value.cancelOrderQty,
              name: `已取消\xa0(${orderStatusQty.value.cancelOrderQty})\xa0\xa0`,
            },
          ],
        },
      ],
    }
  })

  const options3 = computed(() => {
    const colorOptions = ['#7948EA', '#e69103', '#f56c6c', '#00c0c0', '#fddd32', '#007cff']

    const colors = []
    let colorIndex = 0
    serviceTypeQty.value.forEach(() => {
      if (colorIndex >= colorOptions.length) {
        colorIndex = 0
      }
      colors.push(colorOptions[colorIndex])
      colorIndex += 1
    })

    return {
      color: colors,
      tooltip: {
        trigger: 'item',
        formatter: (params: { data: { value: number }; name: string }) => {
          return `${params.name.split('(')[0].trim()}：${params.data.value}`
        },
      },
      legend: {
        top: '6%',
        padding: [0, 15],
      },
      series: [
        {
          type: 'pie',
          radius: ['35%', '70%'],
          center: ['50%', '55%'],
          top: 30,
          label: {
            show: false,
          },
          data: serviceTypeQty.value.map((item) => {
            return {
              value: item.qty,
              name: `${item.name}\xa0(${item.qty})\xa0\xa0`,
            }
          }),
        },
      ],
    }
  })

  const lookW = ref()

  // 渲染图表
  const initChart = () => {
    const chart2 = echarts.init(chartsRef2.value)
    chart2.setOption(options2.value)
    const chart3 = echarts.init(chartsRef3.value)
    chart3.setOption(options3.value)
    // const chart4 = echarts.init(chartsRef4.value)
    // chart4.setOption(options4) // 服务类型占比图表
    // const chart5 = echarts.init(chartsRef5.value)
    // chart5.setOption(options5) // 服务区域分布图表
    // const chart6 = echarts.init(chartsRef6.value)
    // chart6.setOption(options6) // 部门服务排行图表
    // const chart7 = echarts.init(chartsRef7.value)
    // chart7.setOption(options7) // 工单状态分布图表
    // if (chartsRef5.value.clientWidth < 560) {
    //   options5.series[0].radius = (80 * chartsRef5.value.clientWidth) / 560 + '%'
    //   options5.series[0].center[0] = (90 * chartsRef5.value.clientWidth) / 560 + 'px'
    // options3.series[0].radius[1] = (80 * chartsRef3.value.clientWidth) / 560 + '%'
    // options3.series[0].radius[0] = (60 * chartsRef3.value.clientWidth) / 560 + '%'
    // options3.series[0].center[0] = (90 * chartsRef3.value.clientWidth) / 560 + 'px'
    // options3.graphic[0].left = (60 * chartsRef3.value.clientWidth) / 560 + 'px'
    // options4.graphic[0].style.fontSize = (12 * chartsRef4.value.clientWidth) / 560
    //   chart4.setOption(options4) // 服务类型占比图表
    //   chart5.setOption(options5) // 服务区域分布图表
    // }

    // 监听图表容器的大小并改变图表大小
    // // window.addEventListener(
    // // 'resize',
    // // (lookW.value = () => {
    // // if (chartsRef5.value.clientWidth < 500) {
    // //   options5.series[0].radius = (80 * chartsRef5.value.clientWidth) / 500 + '%'
    // //   options5.series[0].center[0] = (90 * chartsRef5.value.clientWidth) / 500 + 'px'
    // //   options4.series[0].radius[1] = (80 * chartsRef4.value.clientWidth) / 500 + '%'
    // //   options4.series[0].radius[0] = (60 * chartsRef4.value.clientWidth) / 500 + '%'
    // //   options4.series[0].center[0] = (90 * chartsRef4.value.clientWidth) / 500 + 'px'
    // //   options4.graphic[0].left = (60 * chartsRef4.value.clientWidth) / 500 + 'px'
    // //   options4.graphic[0].style.fontSize = (12 * chartsRef4.value.clientWidth) / 500
    // //   if (window.innerWidth < 400) {
    // //     options5.series[0].radius =
    // //       (((80 * chartsRef5.value.clientWidth) / 500) * window.innerWidth) / 400 + '%'
    // //     options5.series[0].center[0] =
    // //       (((90 * chartsRef5.value.clientWidth) / 500) * window.innerWidth) / 400 + 'px'
    // //     options4.series[0].radius[1] =
    // //       (((80 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + '%'
    // //     options4.series[0].radius[0] =
    // //       (((60 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + '%'
    // //     options4.series[0].center[0] =
    // //       (((90 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + 'px'
    // //     options4.graphic[0].style.fontSize =
    // //       (((12 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400
    // //     options4.graphic[0].left =
    // //       (((60 * chartsRef4.value.clientWidth) / 500) * window.innerWidth) / 400 + 'px'
    // //   }
    // // } else {
    // //   options5.series[0].radius = '80%'
    // //   options5.series[0].center[0] = '90px'
    // //   options4.series[0].radius = ['60%', '80%']
    // //   options4.series[0].center[0] = '90px'
    // //   options4.graphic = [
    // //     {
    // //       type: 'text',
    // //       left: '60px',
    // //       top: '35%',
    // //       style: {
    // //         text: '总工单数量' + '\n\n' + totalOrder,
    // //         textAlign: 'center',
    // //         width: 30,
    // //         height: 30,
    // //         fontSize: 12,
    // //       },
    // //     },
    // //   ]
    // // }
    // // chart4.setOption(options4) // 服务类型占比图表
    // // chart5.setOption(options5) // 服务区域分布图表
    // chart1.resize()
    chart2.resize()
    chart3.resize()
    // // chart4.resize()
    // // chart5.resize()
    // // // chart6.resize()
    // // // chart7.resize()
    // // }),
    // // )
  }

  onMounted(() => {
    loading.value = true
    Promise.all([
      getHomeOrderQtyFun(),
      getStatisticsQty(),
      getOrderStatusQty(),
      getServiceTypeQty(),
      getNoticeListInfo(),
      getOrderListStatusQty(),
    ]).then(() => {
      initChart()
      loading.value = false
    })
    if (mapHomeInstance.value) {
      mapHomeInstance.value.install()
    }
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', lookW.value)
  })
</script>

<style scoped lang="scss">
  ul,
  li {
    list-style: none;
  }

  @media screen and (max-width: 1350px) {
    .home-wrapper {
      .statistics-wrapper {
        flex-direction: column;
        row-gap: 12px;
        overflow: auto;

        .statistics {
          width: 100% !important;
          overflow: unset !important;
        }

        .sidebar {
          min-width: 100% !important;
          height: fit-content;
          overflow: unset !important;

          .content {
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;

            .to-do-list {
              .statistics {
                justify-content: space-around;
              }
            }
          }
        }
      }
    }
  }

  .home-wrapper {
    height: calc(100vh - 92px);
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .statistics-wrapper {
      height: 100%;
      display: flex;
      column-gap: 12px;

      .statistics {
        flex: 1;
        display: flex;
        flex-direction: column;
        row-gap: 12px;
        width: 0;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }

        .order {
          display: flex;
          column-gap: 12px;

          .order-item {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            color: #fff;
            row-gap: 6px;
            cursor: pointer;
            transition: all 0.2s ease-in;

            &:hover {
              filter: brightness(0.85);
            }

            p {
              font-weight: bold;
              font-size: 14px;
            }

            .num_info {
              display: flex;
              flex-direction: column;
              align-items: center;
              row-gap: 6px;

              .num {
                font-weight: bold;
                font-size: 24px;
              }
            }
          }

          .today {
            background-color: $secondColor3;
          }

          .month {
            background-color: $secondColor1;
          }

          .week {
            background-color: $secondColor2;
          }

          .all {
            background-color: $primaryColor;
          }
          .history {
            background-color: $deleteColor;
          }
        }

        .real-time-data {
          background-color: #fff;

          .title {
            display: flex;
            justify-content: space-between;
            padding: 12px;
            align-items: center;

            .text-icon {
              display: flex;
              column-gap: 5px;
              align-items: center;

              .iconfont {
                color: $primaryColor;
              }

              .text {
                font-size: 14px;
                font-weight: bold;
              }
            }

            .update-time {
              font-size: 12px;
              color: #777;
            }
          }

          .divider {
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
          }

          .content {
            box-sizing: border-box;
            padding: 12px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            column-gap: 24px;
            row-gap: 12px;

            .order_data {
              flex: 1;
              border-radius: 2px;
              display: flex;
              flex-direction: column;
              row-gap: 4px;

              .label_tip {
                border-bottom: 1px dotted #d4d4d4;
                padding-bottom: 2px;
                color: #000;
                display: inline;
                padding-left: 6px;
                font-size: 14px;
              }

              .tip {
                color: #777;
                padding-left: 6px;
              }

              .order_info {
                display: flex;
                align-items: center;
                column-gap: 12px;
                margin-left: 12px;

                .icon {
                  padding: 2px;
                  color: #fff;
                  font-size: 20px;
                  width: 26px;
                  height: 26px;
                  border-radius: 4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .iconfont {
                    font-size: 20px;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                  }
                }

                .num {
                  font-size: 16px;
                  font-weight: bold;
                }
              }
            }

            .today-finish-order,
            .this-month-finish-order {
              .icon {
                background-color: $primaryColor;
              }

              .num {
                color: $primaryColor;
              }
            }

            .today-setled-order,
            .this-month-settled-order {
              .icon {
                background-color: $secondColor2;
              }

              .num {
                color: $secondColor2;
              }
            }

            .order-today-service-customer,
            .order-this-month-service-customer {
              .icon {
                background-color: $secondColor1;
              }

              .num {
                color: $secondColor1;
              }
            }

            .this-month-return-visit-order,
            .today-return-visit-order {
              .icon {
                background-color: $secondColor3;
              }

              .num {
                color: $secondColor3;
              }
            }
          }
        }

        .charts {
          display: flex;
          gap: 12px;
          height: fit-content;
          flex-wrap: wrap;
          flex: 1;
          height: 0;

          .map-chart {
            min-width: 500px;
            flex: 1;
            width: 0;
          }

          .pie-chart {
            flex: 1;
            min-width: 375px;
            width: 0;
          }

          .chart {
            display: flex;

            .info {
              width: 100%;
              outline: 1px solid #ebeef5;
              background-color: #fff;
              flex: 1;
              display: flex;
              flex-direction: column;

              .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                padding: 8px;

                .title_label {
                  display: flex;
                  align-items: center;
                  column-gap: 4px;

                  .iconfont {
                    color: $primaryColor;
                    font-size: 16px;
                  }
                }
              }

              .divider {
                width: 100%;
                height: 1px;
                background-color: rgba(0, 0, 0, 0.04);
              }

              .map_box {
                min-height: 350px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                padding: 6px 0;

                .chart-center {
                  height: 350px;
                  width: 100%;
                  display: flex;
                  justify-content: center;
                }
              }

              .footer_tip {
                padding: 14px 10px 14px;
                display: flex;
                color: #777;
                // background-color: hsla(0, 0%, 0%, 0.02);
                border-top: 1px dotted #d4d4d4;
                margin: 0 10px;
              }
            }
          }
        }
      }

      .sidebar {
        min-width: 400px;
        max-width: 400px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        overflow: auto;

        .content {
          display: grid;
          grid-template-columns: 1fr;
          gap: 20px;

          .quick-operate {
            box-sizing: border-box;

            .title {
              font-size: 14px;
              font-weight: bold;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              column-gap: 5px;
              border-bottom: 1px dotted #d4d4d4;
              padding-bottom: 4px;

              .iconfont {
                color: $primaryColor;
              }
            }

            .content {
              gap: 0;
              cursor: pointer;
              box-sizing: border-box;
              padding: 12px 18px 0 18px;
              row-gap: 12px;
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;

              .card {
                width: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;

                .icon {
                  background-color: rgba(240, 242, 245, 0.529);
                  margin-bottom: 5px;
                  border-radius: 6px;
                }

                .iconfont {
                  width: 40px;
                  height: 40px;
                  font-size: 26px;
                  color: #007cff;
                  display: block;
                  text-align: center;
                  line-height: 40px;
                }

                .icon-order-set-2 {
                  font-size: 36px;
                }

                .icon-add-good {
                  font-size: 32px;
                }

                .icon-add-customer-1 {
                  font-size: 32px;
                }

                .icon-add-order-2 {
                  font-size: 30px;
                }

                span {
                  color: #777;
                }
              }
            }
          }

          .to-do-list {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;

            .title {
              display: flex;
              justify-content: space-between;

              .text-icon {
                display: flex;
                column-gap: 5px;

                .text {
                  white-space: nowrap;
                  font-size: 14px;
                  font-weight: bold;
                  height: 18px;
                  line-height: 18px;
                }

                .iconfont {
                  color: $primaryColor;
                  font-size: 18px;
                }
              }

              .update-time {
                white-space: nowrap;
                font-size: 12px;
                color: #777;
              }
            }

            .divider {
              border-bottom: 1px dotted #d4d4d4;
              margin: 4px 0 12px 0;
            }

            .statistics {
              width: 100%;
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              column-gap: 12px;

              .pointer {
                cursor: pointer;
              }
              .statistics-item {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                row-gap: 2px;

                .content {
                  width: 150px;
                  display: flex;
                  align-items: center;
                  column-gap: 16px;
                  padding-bottom: 4px;

                  .iconfont {
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 26px;
                    border-radius: 4px;
                    color: #fff;
                    margin-left: 12px;
                  }

                  .num {
                    font-size: 16px;
                    font-weight: bold;
                  }
                }

                .title {
                  width: 150px;
                }
              }

              .pending-check-part {
                .content {
                  border-bottom: 1px solid $primaryColor;

                  .iconfont {
                    background-color: $primaryColor;
                  }

                  .num {
                    color: $primaryColor;
                  }
                }
              }

              .pending-settle-order {
                .content {
                  border-bottom: 1px solid $secondColor2;

                  .iconfont {
                    background-color: $secondColor2;
                  }

                  .num {
                    color: $secondColor2;
                  }
                }
              }

              .pending-check-cost {
                .content {
                  border-bottom: 1px solid $secondColor1;

                  .iconfont {
                    background-color: $secondColor1;
                  }

                  .num {
                    color: $secondColor1;
                  }
                }
              }

              .sn-code-extend-warratny-check {
                .content {
                  border-bottom: 1px solid $secondColor3;

                  .iconfont {
                    background-color: $secondColor3;
                  }

                  .num {
                    color: $secondColor3;
                  }
                }
              }

              .abnormal-order {
                .content {
                  border-bottom: 1px solid $deleteColor;

                  .iconfont {
                    background-color: $deleteColor;
                  }

                  .num {
                    color: $deleteColor;
                  }
                }
              }
            }
          }
        }

        .notice {
          box-sizing: border-box;
          width: 100%;

          .info {
            border-radius: 2px;
            background-color: #fff;

            .title {
              border-bottom: 1px dotted #d4d4d4;
              padding-bottom: 4px;

              h3 {
                font-size: 14px;
                display: flex;
                align-items: center;
                column-gap: 4px;
              }

              span {
                font-size: 12px;
                color: #007cff;
                cursor: pointer;
              }
            }

            .list {
              margin-top: 12px;

              .items {
                min-height: 120px;
                overflow-y: auto;
                height: 100%;

                li {
                  margin-bottom: 10px;

                  .tips {
                    display: inline-block;
                    font-size: 12px;
                    padding: 2px 6px;
                    margin-right: 10px;
                    background-color: #eaeff8;
                    color: #007cff;
                  }

                  .text {
                    display: block;
                    width: 200px;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }

                  .time {
                    font-size: 12px;
                    color: #b5bdcb;
                  }
                }
              }

              .footer {
                margin-top: 61px;

                span {
                  font-size: 12px;
                  color: #b5bdcb;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
